<template>
  <div>
    <el-card>
      <h3 style="display: inline-block;margin-bottom: 10px;height: 100px">个人中心</h3>
    </el-card>

        <div class="userinfo" >
          <el-card class="box-card">
            <el-button @click="changeUserInfo">编辑信息</el-button>
          <div class="infos">
            <span style="display: inline-block;font-size: 20px;">Name</span>
            <span style="display: inline-block;font-size: 20px;margin-left: 30px">{{user.username}}</span>
          </div>

            <div class="infos">
              <span style="display: inline-block;font-size: 20px;">Tele</span>
              <span style="display: inline-block;font-size: 20px;margin-left: 30px">{{user.tele}}</span>
            </div>


            <div class="infos">
              <span style="display: inline-block;font-size: 20px;">Loc</span>
              <span style="display: inline-block;font-size: 20px;margin-left: 30px">{{user.loc}}</span>
            </div>


            <div class="infos">
              <span style="display: inline-block;font-size: 20px;">Description</span>
              <span style="display: inline-block;font-size: 20px;margin-left: 30px">{{description}}</span>
            </div>
          </el-card>
        </div>
  </div>

  <!--  弹窗表单-->
  <el-dialog v-model="isShowForm"  width="600px" draggable class="formclass">
    <el-form
        label-width="100px"
        :model="form"
        :rules="rule"
        ref="FORM"
    >
      <el-form-item label="客户姓名" prop="username">
        <el-input v-model="form.username"  />
      </el-form-item>
      <el-form-item label="联系方式" prop="tele">
        <el-input v-model="form.tele" />
      </el-form-item>
      <el-form-item label="常用地址" prop="loc">
        <el-input :readonly="true" v-model="form.loc" />
      </el-form-item>
      <el-row>
        <el-col :span="10">
          <el-form-item label="省" prop="province">
            <el-select v-model="form.province" @change="getProvinces" filterable placeholder="请选择省份" fit-input-width="true"
                       style="width: 120px" prop="province">
              <el-option
                  v-for="item in locValue.provinces"
                  :key="item.provinceId"
                  :label="item.provinceName"
                  :value="item.provinceName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="市" prop="city">
            <el-select v-model="form.city" @change="getCities" placeholder="请选择市"  style="width: 150px" prop="city">
              <el-option
                  v-for="item in this.locValue.cities"
                  :key="item.cityId"
                  :label="item.cityName"
                  :value="item.cityName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="区" prop="religion" >
            <el-select v-model="form.religion"  @change="getRegions" placeholder="请选择区"  style="width: 150px;" prop="religion">
              <el-option
                  v-for="item in locValue.religions"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col >
      </el-row>
      <el-form-item label="详细地址" prop="other" >
        <el-input style="width: 250px;margin-top: 10px" @change="getOthers" placeholder="请输入具体地址" prop="other" v-model="form.other"></el-input>
      </el-form-item>



      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancelExpert('FORM')">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>


</template>

<script>
import store from "@/store";
import {request_operation, request_user} from "@/util/request";
export default {
  name: "UserInfo",
  data(){
    return{
      user:store.state.user,

      isShowForm:false,
      form:{
        uid:store.state.user.uid,
        username:store.state.user.username,
        tele:store.state.user.tele,
        province:'',
        city:'',
        religion:'',
        other:'',
        loc:'',
        regionID:''
      },

      locValue: {
        provinces:[],
        cities:[],
        religions:[]
      },
      rule:{

        username:[{required:true,message:"必填",trigger: 'blur'}],
        tele:[{required:true,message:"必填",trigger: 'blur'}],
        province:[{required:true,message:"必填",trigger: 'blur'}],
        city:[{required:true,message:"必填",trigger: 'blur'}],
        religion:[{required:true,message:"必填",trigger: 'blur'}],
        other:[{required:true,message:"必填",trigger: 'blur'}],
        loc:[{required:true,message:"必填",trigger: 'blur'}],
      }

    }
  },
  methods:{
    clear(){
      this.form={
        uid:'',
        username:'',
        tele:'',
        province:'',
        city:'',
        religion:'',
        other:'',
        loc:'',
      }
    },
    cancelExpert(){

      //   console.log(this.$refs.FORM.resetFields());
      this.clear()
      this.isShowForm = false; //关闭对话框

    },
    changeUserInfo(){
      this.isShowForm=true
      this.form.username = this.user.username
      this.form.loc=this.user.loc
      this.form.province= this.user.loc.split("-")[0];
      this.form.city= this.user.loc.split("-")[1];
      this.form.religion=this.user.loc.split("-")[2];
      this.form.other=this.user.loc.split("-")[3];
      this.form.tele = this.user.tele
      this.form.uid=this.user.uid
      this.locValue.cities=this.locValue.provinces.filter((item)=>item.provinceName===this.form.province)[0].cityList
      this.locValue.religions=this.locValue.cities.filter((item)=>item.cityName===this.form.city)[0].regionList
    },
    onSubmit(){
      this.$refs.FORM.validate((valid)=>{
        if (valid){
          let user = {
            username:this.form.username,
            uid:this.form.uid,
            loc:this.form.loc,
            tele:this.form.tele,
            regionId:this.form.regionID
          }
            request_user.put("user/update",user).then(res=>{
              if(res.data.code==200){
                console.log(res.data);
                this.getUser()
                this.isShowForm=false
                // 组件
                this.$store.commit('updateUserInfo', user); // 或者使用 dispatch 触发 action

                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
              }else {
                this.$message({
                  message: '修改失败',
                  type: 'error'
                });
              }
              this.clear()
            })
        }else {
          this.$message.error('请完善表单相关信息！');
        }
      })
    },


    getLocations(){
      request_operation.get("/province").then(res=>{
        console.log(res.data);
        this.locValue.provinces=res.data.data
      })
    },
    getProvinces(){
      this.form.city=''
      this.form.religion=''
      this.locValue.cities=this.locValue.provinces.filter((item)=>item.provinceName===this.form.province)[0].cityList
      this.form.loc=this.form.province
    },
    getCities(){
      this.form.religion=''
      this.locValue.religions=this.locValue.cities.filter((item)=>item.cityName===this.form.city)[0].regionList
      this.form.loc=this.form.province+'-'+this.form.city
    },
    getRegions(value){
      this.form.loc=this.form.province+'-'+this.form.city+'-'+this.form.religion
      this.form.regionID=this.locValue.religions.filter((item)=>item.regionName===value)[0].regionId
    },
    getOthers(){
      this.form.loc=this.form.province+'-'+this.form.city+'-'+this.form.religion+'-'+this.form.other
    },
    getUser(){
      request_user.post("user/findById",{
        uid:"311bd9dda2c936be2d1acc7e83369e8c",

      }).then(res=>{
        console.log(res.data)
        this.user=res.data.data
        this.$store.commit('updateUserInfo', this.user); // 或者使用 dispatch 触发 action
      })
    }
  },
  beforeMount() {

    this.getLocations()
    this.getUser()
  },
  // 组件
  computed: {
    description() {
      return "泰安科技有限公司会计部" + this.$store.state.user.username;
    }
  }

}
</script>

<style scoped>
.userinfo{
  text-align: left;
}
.infos{
  margin: 50px auto;
}

.box-card {

  margin: 10px auto;
  border-radius: 10px;
}



</style>